<template>
    <div id="video_container">
        <div class="fixedTop" v-show="layerDisplay">
            <sharecarousel @change="getState" :wakeup-param="callApp"></sharecarousel>
        </div>
        <div class="takeup" v-show="layerDisplay"></div>
        <div id="my_video_container">
            <video id="my_video" v-if="vdatas" :src=" getHlsUrl(vdatas.playUrl)"
                   :poster="vdatas && vdatas.stills + '?cmd=imageprocess/processtype/2/quality/100/width/514'"
                   controls="controls" height="100%" width="100%"></video>
        </div>
        <div id="video_openapp" @click="openApp()">
            打开「扬帆App」获得更好的播放体验
        </div>
        <div id="wrapper">
            <div v-if="vdatas">
                <div class="video-title">{{vdatas.name}}</div>
                <author2 :channelInfo="channelInfo" :info="vdatas"></author2>
                <div class="video-content">{{vdatas.description}}</div>
            </div>
            <div class="greyChannel"></div>
            <!-- 其它相关视频专用左文右图组件 -->
            <listvideosmall v-for="(item,index) in contentList.rows" :info="item"></listvideosmall>
            <div class="page-container" @click="getContents()">{{loadMore}}</div>

            <remarknew v-if="theTopicId" :topicId="theTopicId"></remarknew>
            <remarkold v-else-if="paramValue" :params="paramValue"></remarkold>
            <btn text="去「扬帆App」参与评论" cate="btn-light" :wakeup-param="callApp" :counter="remarkNum"></btn>
            <div class="edit-takeup"></div>
        </div>
    </div>
</template>

<script>
    import qs from "querystring"
    import Wakeup from "../../assets/libs/func/callapp.js"

    export default {
        components: {
            Sharecarousel: function (resolve) {
                require(["../../components/share_carousel.vue"], resolve)
            },
            Author2: function (resolve) {
                require(["../../components/author2.vue"], resolve)
            },
            Listvideosmall: function (resolve) {
                require(["../../components/list_video_small.vue"], resolve)
            },
            Remarknew: function (resolve) {
                require(["../../components/remark_new.vue"], resolve)
            },
            Remarkold: function (resolve) {
                require(["../../components/remark_old.vue"], resolve)
            },
            Btn: function (resolve) {
                require(["../../components/btn.vue"], resolve)
            },
            Wakeup
        },
        data: function () {
            return {
                remarkNum: 0,
                channelInfo: {},
                contentList: {
                    rows: [],
                    style: 0,
                    totalCount: 0
                },
                vdatas: {},
                channelid: "",
                vid: "",
                commentInfo: {},

                theTopicId: "",

                // time: 1,    // 需要上报的时间参数
                // timer: {},  // 计时器函数对象,
                sTime: 0,
                isCounter: true,

                commentReportData: {},

                paramValue: {
                    businessType: "vod",
                    activityId: this.$route.params.channelid,   // 177555
                    roleType: "0",
                    programId: this.$route.params.videoid,    // 40288db463f2ba5e0163f713841302aa
                    preChatId: "0"
                },

                layerDisplay: {
                    type: Boolean,
                    default: true
                },

                page: 1,
                pageSize: 5,
                loadMore: "加载更多",
                canLoadMore: true,

                callApp: {
                    contentType: 3,
                    contentParam: this.$route.params.videoid
                }
            }
        },
        beforeCreate: function () {
            let that = this;

            // 获取频道信息
            this.axios.post(
                    interbaseUrl + "setsail/external/externalService?service=getChannelDetail",
                    qs.stringify({
                        params: JSON.stringify({
                            channelId: this.$route.params.channelid
                        }),
                        apiVersion: process.env.VUE_APP_SERVER_VER
                    })
            ).then((response) => {
                // 404重定向
                if (response.data.state === 2012)
                    this.$router.push("/yfs/Dnf");

                this.channelInfo = response.data.data;
                // console.log("-----------------------");
                // console.log(JSON.stringify(this.channelInfo, undefined, 2));
                // console.log("-----------------------");


            });

            // console.log(interbaseUrl + "setsail/external/externalService?service=getVideoDetail");
            // 获取视频：By 李晔
            this.axios.post(
                    interbaseUrl + "setsail/external/externalService?service=getVideoDetail",
                    qs.stringify({
                        params: JSON.stringify({
                            videoId: this.$route.params.videoid     // 40288db463d55cdf0163f1d4cad305fc
                        }),
                        apiVersion: process.env.VUE_APP_SERVER_VER
                    })
            ).then((response) => {
                // console.log("==========================");
                // console.log(JSON.stringify(response.data.data, undefined, 2));
                // console.log("==========================");
                let that = this;
                this.vdatas = response.data.data;
                // 触发visit行为
                // 修改页面信息
                let meta = {
                    title: !(response.data.state == 2056) ? this.vdatas.shareTitle : "视频不存在",
                    content: !(response.data.state == 2056) ? this.vdatas.shareContent : "视频不存在",
                    name: !(response.data.state == 2056) ? that.vdatas.name : "视频不存在"
                };
                // console.log(meta);
                this.createMetaInfo(meta);
                this.freshTitles(!(response.data.state == 2056) ? this.vdatas.shareTitle : "视频不存在");
                if (response.data.data) {
                    function doVisit() {
                        let actionType = "visit";
                        let behaviorData = {
                            "uid": "",
                            "username": "",
                            "opertime": that.toFullTime(),
                            "imei": "",
                            "openid": "",
                            "ip": "",
                            "channelid": that.$route.params.channelid,
                            "contentid": that.$route.params.videoid,
                            "name": that.channelInfo.name,
                            "contenttype": "programme",
                            "sharetype": "",
                            "url": window.location.href
                        };
                        shareUrlReport(behaviorData, actionType);
                    }

                    doVisit();


//                this.theTopicId = this.vdatas.id;
//                console.log("theTopicId:" + this.theTopicId);
                    console.log(JSON.stringify(response.data.state == 2056, undefined, 2));
                    this.paramValue.contenturl = window.location.href;
                    this.paramValue.contenttitle = !(response.data.state == 2056) ? that.vdatas.name : "视频不存在";


                    // 监听播放事件：获取对象
                    let media = document.getElementById("my_video");
                    // console.log(media);
                    // 触发计时器
                    let goTimer = function () {
                        if (that.isCounter) {
                            that.sTime = Math.round(new Date().getTime() / 1000);
                            that.isCounter = false;
                        }
                    };
                    media.addEventListener("play", goTimer, false);

                    // 触发观看视频play行为
                    function doPlay() {
                        let actionType = "play";
                        let behaviorData = {
                            uid: "",
                            username: "",
                            ip: "",
                            openid: "",
                            contentid: that.$route.params.videoid,
                            playurl: that.vdatas.playUrl,
                            imei: "",
                            name: that.vdatas.name,
                            extendtag: "",
                            contenttype: "programme",
                            type: "programme_2",
                            opertime: that.vdatas.displayTime,
                            channelid: that.$route.params.channelid
                        };
                        shareUrlReport(behaviorData, actionType);
                    }

                    doPlay();

                    // 二次分享
                    this.initShareConfig = initShareConf(
                            that.channelInfo.shareTitle,
                            that.channelInfo.shareContent,
                            that.channelInfo.shareImg,
                            window.location.href,
                            {
                                uid: "",
                                username: "",
                                opertime: this.toFullTime(),
                                imei: "",
                                openid: "",
                                ip: "",
                                channelid: this.$route.params.channelid,
                                contentid: this.$route.params.videoid,
                                name: that.vdatas.name,
                                contenttype: "programme",
                                type: "programme_2",
                                tagid: "",
                                extendtag: "",
                                sharetype: "weixin",
                                shareurl: window.location.href
                            }
                    );

                }
            });

        },
        mounted: function () {
            let that = this;
            that.getContents();

            // 配置二次分享信息
            window.initShareConfig = initShareConf(
                    that.channelInfo.shareTitle,
                    that.channelInfo.shareContent,
                    that.channelInfo.shareImg,
                    window.location.href,
                    {
                        uid: "",
                        username: "",
                        tagid: "",
                        contentid: that.$route.params.videoid,
                        imei: "",
                        openid: "",
                        ip: "",
                        name: that.vdatas.name,
                        extendtag: "",
                        type: "programme_2",
                        contenttype: "programme",
                        opertime: that.vdatas.displayTime,
                        channelid: that.$route.params.channelid
                    }
            );

        },
        beforeDestroy: function () {
            let that = this;

            // 播放时长duration行为
            let playTime = Math.round(new Date().getTime() / 1000) - that.sTime;

            function doDuration() {
                let actionType = "duration";
                let behaviorData = {
                    uid: "",
                    username: "",
                    imei: "",
                    ip: "",
                    openid: "",
                    opertime: that.toFullTime(),
                    channelid: that.$route.params.channelid,
                    contentid: that.$route.params.videoid,
                    name: that.vdatas.name,
                    playurl: window.location.href,
                    playtime: playTime,
                    // playurl: that.vdatas.playUrl,
                    // playtime: that.vdatas.vLength,
                    contenttype: "programme",
                    type: "programme_2",
                    extendtag: "",
                    tagid: ""
                };
                // console.log(behaviorData);
                shareUrlReport(behaviorData, actionType);
                clearTimeout(that.timer);
            }

            doDuration();
        },
        methods: {
            getState: function (bol) {
                // console.log(bol);
                this.layerDisplay = bol;
            },
            getCounter: function (val) {
                this.remarkNum = val;
            },

            // 获取相关联的视频内容：注意数据结构的转换
            getContents: function () {
                this.loadMore = "加载中，请稍候...";
                this.axios.post(
                        interbaseUrl + "setsail/external/externalService?service=getRelatedVideoList",
                        qs.stringify({
                            params: JSON.stringify({
                                videoId: this.$route.params.videoid,
                                idx: (this.page - 1) * this.pageSize,
                                size: this.pageSize
                            }), apiVersion: process.env.VUE_APP_SERVER_VER
                        })
                ).then((response) => {
                    let responseData = response.data.data;
                    // console.log("**************************");
                    // console.log(JSON.stringify(responseData, undefined, 2));
                    // console.log("**************************");

                    // 进行必要的数据格式转换
                    for (let key in responseData.rows) {
                        responseData.rows[key] = {
                            content: responseData.rows[key]
                        };
                        responseData.rows[key].contentId = responseData.rows[key].content.id;
                        responseData.rows[key].type = 5;
                    }

                    this.contentList.style = responseData.style;
                    this.contentList.totalCount = responseData.totalCount;
                    if (this.canLoadMore)
                        this.contentList.rows = this.contentList.rows.concat(responseData.rows);
                    if (this.contentList.rows.length >= responseData.totalCount) {
                        this.loadMore = "已经加载全部";
                        this.canLoadMore = false;
                    } else {
                        this.page++;
                        this.loadMore = "加载更多";
                    }

                    // console.log("**************************");
                    // console.log(JSON.stringify(this.contentList, undefined, 2));
                    // console.log("**************************");
                });
            },
            openApp: function () {
                openDownPage(this.callApp.contentType, this.callApp.contentParam);
            }
        }
    }
</script>

<style>
    #video_container {
    }

    #video_openapp {
        font-size: 0.9rem;
        line-height: 2.6rem;
        color: #FFF;
        text-align: center;
        background-color: #9852FF;
    }

    #my_video_container {
        width: 100%;
        padding-bottom: 56.25%;
        position: relative;
    }

    #my_video {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        object-fit: cover;
    }

    .video-title {
        font-size: 1.3rem;
        line-height: 1.8rem;
        font-weight: bold;
    }

    .video-content {
        font-size: 0.9rem;
        line-height: 1.2rem;
        color: #999999;
    }
</style>